<script lang="ts" setup>
import { onMounted, ref, type Ref } from "vue";
import { getSimpleById, type SimpleDeVO } from "@/api/simple";
import {baseUrl} from "@/api/http"
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import Post from "@/components/post/post.vue";
import ShopBottom from "@/componets/bottom/shopBottom.vue";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
const currentIndex = ref(0);
const isFollowed = ref(false);


const photo:Ref<SimpleDeVO> = ref({
	id: "",
	carousel: [],
	title: "",
	updateTime: "",
	address: "",
	plainUser: {
		id: "",
		userName: "",
		userInfo: "",
		userImg: ""
	},
	model: "",
	description: "",
	clothing: "",
	cameraModel: "",
	cameraLens: "",
	aperture: "",
	shutter: "",
	cameraIso: ""
})


const photographerAvatar =
  "";
// 移除了modelAvatar变量

const handleSwiperChange = (e: any) => {
  currentIndex.value = e.detail.current;
};

const showPreview = ref(false);


const previewIndex = ref(0);


const isLiked = ref(Array(photo.value.carousel.length).fill(false));


let clickTimer: number | null = null;


const handleImageClick = () => {
  previewIndex.value = currentIndex.value;
  showPreview.value = true;
};


const handlePreviewClose = () => {
  showPreview.value = false;
};


const handlePreviewChange = (index: number) => {
  previewIndex.value = index;
};


const handlePreviewImageClick = (index: number) => {
  if (clickTimer) {
    // 双击
    clearTimeout(clickTimer);
    clickTimer = null;
    isLiked.value[index] = !isLiked.value[index];
    showLikeAnimation(index);
  } else {
    // 单击
    clickTimer = setTimeout(() => {
      clickTimer = null;
    }, 300) as unknown as number;
  }
};


const showLikeAnimation = (index: number) => {
  // 点赞动画逻辑
  uni.showToast({
    title: isLiked.value[index] ? "已点赞" : "已取消点赞",
    icon: "none",
  });
};


const saveImage = (url: string) => {
  uni.showLoading({
    title: "保存中...",
  });
  uni.downloadFile({
    url: url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({
              title: "保存成功",
              icon: "success",
            });
          },
          fail: () => {
            uni.showToast({
              title: "保存失败",
              icon: "none",
            });
          },
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: "下载失败",
        icon: "none",
      });
    },
    complete: () => {
      uni.hideLoading();
    },
  });
};


// const handleShare = () => {
//   uni.showToast({
//     title: "分享成功",
//     icon: "success",
//   });
// };


const goBack = () => {
  uni.navigateBack();
};


	

const init = () => {
	uni.getStorage({
		key: "photoId",
		success: (data:any) => {
			getSimpleById(data.data).then(res => {
				let temp = res.data.data.data as SimpleDeVO
				photo.value = temp
			})
		}
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

init()
</script>


<template>
  <view class="page-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left">
        <uni-icons
          type="back"
          size="24"
          class="cursor-pointer"
          @click="goBack"
        />
      </view>
      <view class="nav-title">写真详情</view>
      <view class="nav-right">
        <uni-icons
          type="share"
          size="24"
          class="cursor-pointer"
          @click="onShareAppMessage"
        />
      </view>
    </view>

	<post :title="photo.title" :content="photo.description" :image="photo!.image"></post>

	<shop-bottom></shop-bottom>


  </view>
</template>



<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: #f7f7f7;
  padding-top: 80rpx;
  padding-bottom: 80rpx;
}
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: relative;
}
.nav-left,
.nav-right {
  width: 88rpx;
  display: flex;
  align-items: center;
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.swiper {
  width: 750rpx;
  height: 1000rpx;
  position: relative;
}
.swiper-item {
  width: 100%;
  height: 100%;
  position: relative;
}
.photo {
  width: 100%;
  height: 100%;
}
.image-counter {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 14px;
}
.image-description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 20rpx 30rpx;
  font-size: 14px;
  line-height: 1.5;
}
/* 预览模态框样式 */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.preview-header {
  height: 88rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30rpx;
}
.preview-counter {
  color: #ffffff;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}
.preview-swiper {
  flex: 1;
  width: 750rpx;
}
.preview-swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-image {
  width: 100%;
  height: 100%;
}
.like-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: like-animation 0.5s ease-in-out;
}
@keyframes like-animation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.preview-footer {
  padding: 30rpx;
}
.preview-description {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20rpx;
}
.preview-actions {
  display: flex;
  justify-content: flex-end;
}
.save-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-section {
  padding: 40rpx 30rpx;
  background-color: #ffffff;
}
.title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
}
.meta {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666666;
  font-size: 14px;
}
.photographer,
.model-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
/* 移除了model-info样式 */
.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 44rpx;
}
.photographer-info,
.model-details {
  flex: 1;
}
.name {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8rpx;
}
.description {
  font-size: 14px;
  color: #666666;
}
.content-card {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.paragraph {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
}
.params-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.param-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.param-label {
  color: #666666;
}
.param-value {
  color: #333333;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
